<template>
	<div class="nav">
		<div class="s_nav">
			<div class="nav_title">
				<router-link to="/">首页</router-link>
				<router-link v-if="item.typename.split('').length<=2" :to="{name:'channel',params:{tid:item.tid}}" v-for="(item,index) in navList" :key="index" :class="{active:item.tid==getCurTid}">
					{{item.typename}}
				</router-link>
				<router-link v-else :to="{name:'channel',params:{tid:item.tid}}">
					{{item.typename}}
				</router-link>
			</div>
			<div class="nav_down" @click="navShow()">
				<svg class="index__icon__src-home-zone-" aria-hidden="true">
					<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-xialaxiao"></use>
				</svg>
			</div>
		</div>
		<div :class="{t_nav:is,tf:show}">
			<div class="nav_title">
				<router-link to="/" class="active">首页</router-link>
				<router-link v-if="item.typename.split('').length<=2" :to="{name:'channel',params:{tid:item.tid}}" v-for="(item,index) in navList" :key="index" class="{active:item.tid==getCurTid}">
					{{item.typename}}
				</router-link>
				<router-link v-else :to="{name:'channel',params:{tid:item.tid}}">
					{{item.typename}}
				</router-link>
			</div>
			<div class="nav_top" @click="navShow()">
				<svg class="index__icon__src-home-zoneAll-" aria-hidden="true"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-shouqixiao"></use></svg>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				is:true,
				show:false,
				navList: window.__INITIAL_STATE__.reduxAsyncConnect.partitionList[0]
			}
		},
		methods:{
			navShow(){
				this.show = !this.show
			}
		},
		computed:{
			getCurTid(){
				return this.$store.getters.getCurTid
			}
		},
		created(){
			this.$store.commit('setTid',{
				curTid:this.$route.params.tid
			})
		},
	}
</script>

<style lang="scss">
	.nav {
		position: fixed;
		top: 45px;
		background-color: #fff;
		width: 100%;
		height: 44px;
		z-index: 5;
		/*overflow: hidden;*/
		/*transform: translateZ(0);*/
		/*backface-visibility: hidden;*/
		/*-webkit-perspective: 1000;*/
		.s_nav {
			.nav_title {
				position: relative;
				width: 90%;
				padding-top: 6px;
				overflow: hidden;
				padding-left: 19px;
				overflow-x: scroll;
				overflow-y: hidden;
				height: 44px;
				white-space: nowrap;
				padding-bottom: 5px;
				-webkit-overflow-scrolling: touch;
				z-index: 1;
				-webkit-transform: translateZ(0);
				-webkit-perspective: 1000;
				&::-webkit-scrollbar {
					display: none;
				}
				a {
					display: inline-block;
					-webkit-transform: translateZ(0);
					-webkit-perspective: 1000;
					background-color: #fff;
					margin-right: 21px;
					color: #757575;
					line-height: 30px;
				}
				.active{
					line-height: 30px;
					color: #fb7299;
					border-bottom: 2px solid #fb7299;
				}
				.router-link-exact-active {
					line-height: 30px;
					color: #fb7299;
					border-bottom: 2px solid #fb7299;
				}
			}
			.nav_down {
				position: absolute;
				top: -5px;
				width: 32.5px;
				height: 44px;
				right: 10px;
				.index__icon__src-home-zone- {
					display: block;
					width: 16px;
					height: 44px;
					margin: auto;
					fill: #aaa;
				}
			}
		}
		.t_nav{
			    position: fixed;
			    background-color: #fff;
			    top: 44px;
			    z-index: 6;
			    padding-left: 4px;
			    padding-right: 5px;
			    overflow: hidden;
			    transition: all 1s;
			    transform: translateY(-100%);
			.nav_title{
				    position: relative;
				    width: 100%;
				    display: flex;
				    flex-direction: row;
				    flex-wrap: wrap;
				    justify-content: space-between;
				    align-items: center;
				a {
					    position: relative;
					    display: block;
					    padding-top: 4px;
					    padding-bottom: 4px;
					    margin-left: 5px;
					    margin-right: 5px;
					    background-color: #fff;
				        width: 55px;
					    font-size: 18px;
					    line-height: 36px;
					    text-align: center;
					    color: #757575;
					    border-bottom: 1px solid #fff;
				}
				.router-link-exact-active {
					line-height: 30px;
					color: #fb7299;
					border-bottom: 2px solid #fb7299;
				}
				/*.active{
					line-height: 30px;
					color: #fb7299;
					border-bottom: 2px solid #fb7299;
				}*/
			}
			.nav_top{
					    position: relative;
					    margin: auto;
					    margin-top: -5px;
					    width: 90px;
					    height: 42px;
					    margin-bottom: 13px;
					    .index__icon__src-home-zoneAll-{
					    	    position: absolute;
							    display: block;
							    width: 16px;
							    height: 42px;
							    margin: auto;
							    left: 36px;
							    fill: #aaa;
					    }
				}
		}
		.tf{
			transform: translateY(0);
		}
	}
</style>